<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>88李锦秋作业</title>
</head>

<body>
    <div id="app1">
    <table border="1">
        <tr>
            <th><input type="checkbox" :checked="quanxuan" v-model="quanxuan" @click="btn">全选</th>
            <th>编号</th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in all" :key="index">
            <td><input type="checkbox" :checked="item.selectall" v-model="item.selectall"></td>
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="item.num>1?item--:1">-</button> 
                {{item.num}} 
                <button @click="item.num++">+</button>
            </td>
            <td>
                <button @click ="del(index)">删除</button>
            </td>
        </tr>
    </table>
        <!-- <show :arr="all"></show> -->
        <div>总价：{{allprice}}</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.js"></script>
    <script>
        // Vue.component("show",{
        //     props:["arr"],
        //     template:` <table  border="1">
        //     <tr>
        //         <th><input type="checkbox" :checked="quanxuan" v-model="quanxuan" @click="btn">全选</th>
        //         <th>编号</th>
        //         <th>商品</th>
        //         <th>单价</th>
        //         <th>数量</th>
        //         <th>操作</th>
        //     </tr>
        //     <tr v-for="(item,index) in arr" :key="index">
        //         <td><input type="checkbox"></td>
        //         <td>{{index+1}}</td>
        //         <td>{{item.name}}</td>
        //         <td>{{item.price}}</td>
        //         <td>{{item.quantity}}</td>
        //         <td><button @click ="item.num>1?item.num--:1">-</button> {{item.num}} <button @click="item.num++">+</button> <button>删除</button></td>
               
        //     </tr>
        // </table>`
        // })
        const app1 = new Vue({
            el: "#app1",
            data: {
                all: [
                    { "selectall":false,"id": 1, "price": 1000,"flage":"flase" ,"num": 1, "name": "电视机", "quantity":"50"},
                    { "selectall":false,"id": 2, "price": 2000,"flage":"flase" ,"num": 1, "name": "电冰箱", "quantity": "50" },
                    { "selectall":false,"id": 3, "price": 3000,"flage":"flase" ,"num": 1, "name": "电磁路", "quantity": "50" },
                ],
                quanxuan:false,
            },
            computed:{
                allprice(){
                    var tt =0;//全选
                    let total = 0;
                    for(let i =0;i<this.all.length;i++){
                         if(this.all[i].selectall){
                             total += this.all[i].price * this.all[i].num;
                             tt++
                         }
                    };
                    if(tt== this.all.length && tt!=0){
                        this.quanxuan = true
                    }else{
                        this.quanxuan = false
                    }
                    return total;
                }
            },
            methods: {
                btn() {
                    if (!this.quanxuan) {
                        for (let i in this.all) {
                            this.all[i].selectall = true//隐式转换
                        }
                    } else {
                        for (let i in this.all) {
                            this.all[i].selectall = false
                        }
                    }
                },
                del(index){
                    this.all.splice(index,1)
                }
            }
        })
    </script>
</body>

</html>